<template>
	<view>
		<!-- 顶部选项卡 -->
		<scroll-view scroll-with-animation="true" :scroll-into-view="scrollinto" scroll-x class="border-bottom scroll-row">
			<view :id="'tab'+index" @tap="changeTab(index)" v-for="(item,index) in tabBars" :key="index" style="height: 80rpx;line-height: 80rpx;"
			 class="scroll-row-item px-3">
				<text :class="tabIndex===index?'main-text-color font-weight':''" class="font-md">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangeTab" :current="tabIndex" :style="'height:'+scrollH+'px;'" :interval="3000" :duration="150">
			<block v-for="(item,index) in newsitems" :key="index">
				<swiper-item>
					<scroll-view @scrolltolower="loadmore(index)" scroll-y="true" :style="'height:'+scrollH+'px;'">
						<block v-for="(list,listIndex) in item.list" :key="listIndex">
							<!-- 首页轮播图 -->
							<swiper-image v-if="list.type==='swiper'" :resData="list.data" />
							<template v-if="list.type==='indexnavs'">
								<!-- 首页nav导航 -->
								<index-nav :resData="list.data" />
								<!-- 分割线 -->
								<divider />
							</template>
							<template v-if="list.type==='threeAdv'">
								<!-- 三途动画 -->
								<three-adv :resData="list.data" />
								<divider />
							</template>

							<!-- 大图广告位 -->
							<!-- <card headTitle="每日精选" bodyCover="/static/images/demo/cate_banner.png" /> -->
							<!-- 公共组件 -->
							<view class="row j-sb" v-if="list.type==='commonList'">
								<block v-for="(item2,index2) in list.data" :key="index2">
									<common-list :item="item2" :index="index2"></common-list>
								</block>
							</view>
						</block>
						<!-- 上拉加载更多 -->
						<divider />
						<view class="d-flex a-center j-center text-light-muted font-md py-3">
							{{item.loadtext}}
						</view>
					</scroll-view>
				</swiper-item>
			</block>

		</swiper>


	</view>
</template>
<script>
	let demoTabbars = [{
			name: '推荐'
		},
		{
			name: '家电'
		},
		{
			name: '智能'
		},
		{
			name: '摄影'
		},
		{
			name: '厨房'
		},
		{
			name: '家居'
		},
		{
			name: '生活'
		},
		{
			name: '饮料'
		},
		{
			name: '调料'
		},
		{
			name: '学习'
		},
		{
			name: '音乐'
		}
	];
	let demo1 = [{
			type: 'swiper',
			data: [{
					src: '../../../static/images/demo/demo4.jpg'
				},
				{
					src: '../../../static/images/demo/demo4.jpg'
				},
				{
					src: '../../../static/images/demo/demo4.jpg'
				},
				{
					src: '../../../static/images/demo/demo4.jpg'
				},
			]
		},
		{
			type: 'indexnavs',
			data: [{
					src: '/static/images/indexnav/1.png',
					text: '新品分类'
				},
				{
					src: '/static/images/indexnav/2.gif',
					text: '小米众筹'
				},
				{
					src: '/static/images/indexnav/3.gif',
					text: '以旧换新'
				},
				{
					src: '/static/images/indexnav/4.gif',
					text: '1分拼团'
				},
				{
					src: '/static/images/indexnav/5.gif',
					text: '超值特买'
				},
				{
					src: '/static/images/indexnav/6.gif',
					text: '小米秒杀'
				},
				{
					src: '/static/images/indexnav/7.gif',
					text: '真心想要'
				},
				{
					src: '/static/images/indexnav/8.gif',
					text: '电视热卖'
				},
				{
					src: '/static/images/indexnav/9.gif',
					text: '加店热卖'
				},
				{
					src: '/static/images/indexnav/10.gif',
					text: '米粉卡'
				},
			]
		},
		{
			type: 'threeAdv',
			data: {
				big: {
					src: '/static/images/demo/demo1.jpg'
				},
				smalltop: {
					src: '/static/images/demo/demo2.jpg'
				},
				smallbottom: {
					src: '/static/images/demo/demo3.jpg'
				}
			}
		},
		{
			type: 'commonList',
			data: [{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
				{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
				{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
				{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
			]
		}
	];
	let demo2 = [{
			type: 'swiper',
			data: [{
					src: '../../../static/images/demo/demo4.jpg'
				},
				{
					src: '../../../static/images/demo/demo4.jpg'
				},
				{
					src: '../../../static/images/demo/demo4.jpg'
				},
				{
					src: '../../../static/images/demo/demo4.jpg'
				},
			]
		},
		{
			type: 'indexnavs',
			data: [{
					src: '/static/images/indexnav/1.png',
					text: '新品分类'
				},
				{
					src: '/static/images/indexnav/2.gif',
					text: '小米众筹'
				},
				{
					src: '/static/images/indexnav/3.gif',
					text: '以旧换新'
				},
				{
					src: '/static/images/indexnav/4.gif',
					text: '1分拼团'
				},
				{
					src: '/static/images/indexnav/5.gif',
					text: '超值特买'
				},
				{
					src: '/static/images/indexnav/6.gif',
					text: '小米秒杀'
				},
				{
					src: '/static/images/indexnav/7.gif',
					text: '真心想要'
				},
				{
					src: '/static/images/indexnav/8.gif',
					text: '电视热卖'
				},
				{
					src: '/static/images/indexnav/9.gif',
					text: '加店热卖'
				},
				{
					src: '/static/images/indexnav/10.gif',
					text: '米粉卡'
				},
			]
		},
		// {
		// 	type: 'threeAdv',
		// 	data: {
		// 		big: {
		// 			src: '/static/images/demo/demo1.jpg'
		// 		},
		// 		smalltop: {
		// 			src: '/static/images/demo/demo2.jpg'
		// 		},
		// 		smallbottom: {
		// 			src: '/static/images/demo/demo3.jpg'
		// 		}
		// 	}
		// },
		{
			type: 'commonList',
			data: [{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
				{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
				{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
				{
					cover: '/static/images/demo/list/1.jpg',
					desc: '1.5 变频',
					title: '小米家电',
					oprice: 2399,
					pprice: 1399
				},
			]
		}
	]
	import swiperImage from '@/components/index/swiper-image.vue';
	import indexNav from '@/components/index/index-nav.vue';
	import threeAdv from '@/components/index/three-adv.vue';
	import card from '@/components/common/card.vue';
	import commonList from '@/components/common/common-list.vue';
	export default {
		components: {

			swiperImage,
			indexNav,
			threeAdv,
			card,
			commonList
		},
		data() {
			return {
				newsitems: [],
				scrollinto: '',
				scrollH: 500,
				tabIndex: 0,
				tabBars: [],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(84)
				}
			})
			this.__init()
		},
		methods: {
			// 上拉加载更多
			loadmore(index){
				let item=this.newsitems[index]
				if(item.loadtext!='上拉加载更多'){
					return
				}
				item.loadtext='加载中...'
				setTimeout(res=>{
					item.list=[
						...item.list,
						...demo2
					]
					item.loadtext='上拉加载更多'
				},2000)
			},
			// 数据初始化
			__init() {
				this.tabBars = demoTabbars
				let arr = []
				for (var i = 0; i < this.tabBars.length; i++) {
					let obj = {
						list: [],
						// 上拉加载更多 加载中 没有更多啦
						loadtext:'上拉加载更多'
					}
					if (i === 0) {
						obj.list = demo1
					}
					arr.push(obj)
				}
				this.newsitems = arr
			},
			changeTab(index) {
				if (this.tabIndex == index) {
					return
				}
				this.tabIndex = index
				this.scrollinto = 'tab' + index
				this.addData()
			},
			onChangeTab(e) {
				let index = e.detail.current
				if (this.tabIndex == index) {
					return
				}
				this.tabIndex = index
				this.scrollinto = 'tab' + index
				this.addData()
			},
			addData(){
				if(this.newsitems[this.tabIndex].list.length<=0){
					this.newsitems[this.tabIndex].list=demo2
				}
			}
		}
	}
</script>

<style>

</style>
